<template>

  <div class="main-content">
    <div style="position: absolute;font-size: 40px;font-weight: bold;color: white;font-style: italic;top:200px;left: 200px">长租短租，就上租宿预订网</div>
    <div>
      <img src="@/assets/imgs/sea.jpg" style="width: 100%; height: 300px; border-bottom-left-radius: 40%;border-bottom-right-radius: 40% " alt="">
    </div>

    <div style="width: 60%;margin: 30px auto;text-align: center">
      <div style="text-align: center;font-size: 25px;font-weight: bold">租赁服务升级</div>
      <div style="display: flex;margin-top: 30px">
        <div style="flex: 1">
          <img src="@/assets/icon/houseIcon2.png" alt="" style="width: 50px;height: 50px">
          <div style="font-size: 14px;margin-top: 10px;color:#455873FF;">户型多样 · 价格透明 · 随心切换</div>
        </div>

        <div style="flex: 1">
          <img src="@/assets/icon/houseIcon.png" alt="" style="width: 50px;height: 50px">
          <div style="font-size: 14px;margin-top: 10px;color:#455873FF;">房源严选 · 全程无忧 · 安心入住</div>
        </div>

        <div style="flex: 1">
          <img src="@/assets/icon/chooseIcon.png" alt="" style="width: 50px;height: 50px">
          <div style="font-size: 14px;margin-top: 10px;color:#455873FF;">安全便捷 · 服务保障 · 用心生活</div>
        </div>
      </div>

    </div>
    <div style="text-align: center;font-size: 25px;font-weight: bold;height: 50px"> 平台优质房源，为您推荐</div>

    <div style="width: 60%;margin: 50px auto;text-align: left;">

      <!-- 搜索区域 -->
      <div class="search-container">
        <el-card class="search-card">
          <div class="search-form">
            <div class="search-item">
              <span class="search-label">房型筛选</span>
              <el-select
                  v-model="searchForm.typeId"
                  placeholder="选择房型"
                  clearable
                  class="search-input"
              >
                <el-option
                    v-for="type in data.roomTypes"
                    :key="type.id"
                    :label="type.name"
                    :value="type.id"
                />
              </el-select>
            </div>
            <div class="search-item">
              <span class="search-label">关键词</span>
              <el-input
                  v-model="searchForm.keyword"
                  placeholder="输入房间名称或描述"
                  clearable
                  class="search-input"
              />
            </div>
            <el-button type="primary" @click="searchRooms" class="search-btn">
              <el-icon><Search /></el-icon> 搜索
            </el-button>
            <el-button type="primary" @click="clearSearch" class="search-btn">
              重置
            </el-button>
          </div>
        </el-card>
      </div>

      <!-- 搜索结果提示 -->
      <div v-if="isSearched" class="search-results-info">
        <el-tag type="info" size="large" closable @close="clearSearch">
          共找到: {{ data.roomdata.length }} 个房源
          <template v-if="searchForm.typeId">
            · 分类: {{ getTypeName(searchForm.typeId) }}
          </template>
          <template v-if="searchForm.keyword">
            · 关键词: "{{ searchForm.keyword }}"
          </template>
        </el-tag>
      </div>



      <div style="margin-top: 30px">
        <el-row :gutter="20">
          <el-col :span="6" v-for="room in data.roomdata" :key="room.id">
            <!-- 房间卡片 -->
            <div class="room-card" @click="goToDetail(room.id)">
              <!-- 图片区域 -->
              <div class="image-wrapper">
                <img 
                  :src="room.roomImages[0] ? room.roomImages[0] : '@/assets/imgs/sea.jpg'" 
                  class="room-image"
                  alt="房间图片"
                >
                <!-- 房型标签 -->
                <div class="room-type-tag">
                  <el-tag size="small" type="success" effect="dark">
                    {{ getTypeName(room.typeId) || '未知类型' }}
                  </el-tag>
                </div>
              </div>
              
              <!-- 房间信息 -->
              <div class="room-info">
                <h3 class="room-title">{{ room.name }}</h3>
                <div class="room-description">
                  <span>{{ room.description || '暂无房间描述' }}</span>
                </div>
                <div class="room-details">
                  <div class="price">
                    <span class="price-symbol">￥</span>
                    <span class="price-value">{{ room.price }}</span>
                    <span class="price-unit">/月 起</span>
                  </div>
                  <div class="comment-count">
                    <el-icon><ChatDotRound /></el-icon>
                    <span>{{ room.commentCount || 0 }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 无搜索结果显示 -->
        <div v-if="isSearched && data.roomdata.length === 0" class="no-results">
          <el-empty description="没有找到匹配的房源" />
        </div>
      </div>

      <div style="margin-bottom: 15px">
        <el-pagination
            @size-change="loadRoomData"
            @current-change="loadRoomData"
            v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize"
            :page-sizes="[5,10,15,20]"
            backgroudr
            layout="total, sizes, prev, pager, next,jumper"
            :total="data.total"
        />
      </div>

    </div>

  </div>

</template>

<script setup>

import request from "../../utils/request";
import {ElMessage} from "element-plus";
import { reactive,ref } from "vue";
import { useRouter } from 'vue-router';


const data=reactive({
  user:JSON.parse(localStorage.getItem('localStorageUser')),
  roomdata:[],
  roomTypes:[],
  pageNum:1,
  pageSize:10,
  total:0,
})
const isSearched = ref(false);
const searchForm = reactive({
  typeId: '',
  keyword: '',
});

const router = useRouter()
const goToDetail = (roomId) => {
  router.push({ name: 'room_detail', params: { roomId: roomId } });
}

const loadRoomData = async () => {
  try {
    const res = await request.get('/room/SelectPage',{
      params: {
        typeId: searchForm.typeId,
        keyword: searchForm.keyword,
        pageNum: data.pageNum,
        pageSize: data.pageSize,
      },
    });
    if (res.code === '200') {
      data.roomdata = res.data.list;
      // console.log('后端返回数据:', res.data.list)
      // console.log('roomdata返回数据:', data.roomdata)
      data.total = res.data.size;
      // console.log('后端返回数据:', res); // 打印后端返回的完整数据

    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    console.error('加载房间数据失败', error);
    ElMessage.error('加载房间数据失败');
  }
};

loadRoomData()

//加载房间分类数据
const loadRoomTypes = async () => {
  try {
    const res = await request.get('/roomType/selectAll');
    if (res.code === '200') {
      data.roomTypes = res.data;
      // console.log('后端返回房间分类数据:', data.roomTypes);
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    console.error('加载房间类型数据失败', error);
    ElMessage.error('加载房间类型数据失败');
  }
};
loadRoomTypes()
//获取房间分类名称
const getTypeName = (typeId) => {
  const type = data.roomTypes.find(type => type.id === typeId);
  return type ? type.name : '未知分类';
};

//搜索房源
const searchRooms = () => {
  loadRoomData();
  isSearched.value = true;
};
// 清除搜索
const clearSearch = () => {
  searchForm.typeId = '';
  searchForm.keyword = '';
  loadRoomData();
  isSearched.value = false;
};

</script>
<style scoped>
.search-container {
  width: 60%;
  margin: -50px auto 0;
  position: relative;
  z-index: 10;
}

.search-card {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.search-form {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
}

.search-item {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.search-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.search-input {
  width: 100%;
}

.search-btn {
  height: 40px;
  margin-top: 24px;
  padding: 0 20px;
  font-weight: 500;
}

.search-results-info {
  margin: 20px 0;
  display: flex;
  justify-content: flex-start;
}

.no-results {
  width: 100%;
  padding: 40px 0;
  text-align: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .search-container {
    width: 90%;
  }

  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-btn {
    width: 100%;
  }
}

/* 房间卡片样式 */
.room-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  position: relative;
}

.room-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 75%;
  overflow: hidden;
}

.room-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.room-card:hover .room-image {
  transform: scale(1.05);
}

.room-type-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}

.room-info {
  padding: 16px;
}

.room-title {
  font-size: 16px;
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 8px;
  line-height: 1.4;
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.room-description {
  color: #666;
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.4;
  height: 36px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.room-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  color: #ff4d4f;
  font-size: 14px;
  margin-right: 2px;
}

.price-value {
  color: #ff4d4f;
  font-size: 20px;
  font-weight: bold;
}

.price-unit {
  color: #999;
  font-size: 14px;
  margin-left: 4px;
}

.comment-count {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  font-size: 14px;
}

.comment-count .el-icon {
  font-size: 16px;
}

/* 分页器样式优化 */
.el-pagination {
  margin-top: 30px;
  justify-content: center;
}

.el-pagination .el-pagination__total,
.el-pagination .el-pagination__jump {
  margin-right: 16px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .room-card {
    margin-bottom: 16px;
  }

  .room-title {
    font-size: 14px;
    height: 40px;
  }

  .price-value {
    font-size: 18px;
  }
}

</style>
